<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- head 中 -->
    <link rel="stylesheet" href="css/materialize.min.css">

    

    <title>H5 网页示例</title>

    <style>
        #title{
            color: #fb8c00;
        }

    </style>

</head>
<body style="margin-left: 10px;margin-right: 10px">

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日语听力测试</title>
    <style>

        .quiz-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        .question-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border: 2px solid black;
            max-width: 600px;
            margin-bottom: 30px;
        }

        .header {
            margin-bottom: 20px;
        }

        h1 {
            font-size: 36px;
            text-align: center;
        }

        p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .answer-options {
            display: flex;
            flex-direction: column;
        }

        .answer-options input[type=radio] {
            margin-right: 10px;
        }

        .submit-button-container {
            margin-top: 50px;
        }

        #submit-button {
            font-size: 20px;
            padding: 10px 20px;
            border: none;
            background-color: black;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #submit-button:hover {
            background-color: white;
            color: black;
        }

        .result-container {
            margin-top: 50px;
            text-align: center;
        }

        span#result {
            font-weight: bold;
            font-size: 24px;
            padding: 0 10px;
        }

        .card-header {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .card-body {
            margin-bottom: 10px;
        }

        .text-field {
            margin-bottom: 10px;
        }

        .tab-container {
            display: flex;
        }

        .tab {
            cursor: pointer;
            margin-right: 10px;
        }

        #card2 {
            display: none;
        }



    </style>
</head>
<body>

<div class="quiz-container">
    <div class="question-container">
        <div class="header">
            <h1>问题六</h1>
        </div>
        <p>男の人はどう思っていますか。</p>
        <audio src="question6.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="a" name="answer6" value="a">
            <label for="a">A.資料が多すぎる。</label><br>
            <input type="radio" id="b" name="answer6" value="b">
            <label for="b">B.資料が少なすぎる。</label><br>
            <input type="radio" id="c" name="answer6" value="c">
            <label for="c">C.資料足りない。</label><br>
            <input type="radio" id="d" name="answer6" value="d">
            <label for="d">D.資料が難しい。</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题七</h1>
        </div>
        <p>お母さんはどうして頭が痛いですか。</p>
        <audio src="question7.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="e" name="answer7" value="e">
            <label for="e">A.風邪をひいたせいです</label><br>
            <input type="radio" id="f" name="answer7" value="f">
            <label for="f">B.飲みすぎたせいです</label><br>
            <input type="radio" id="g" name="answer7" value="g">
            <label for="g">C.子供の成績が悪いせいです</label><br>
            <input type="radio" id="h" name="answer7" value="h">
            <label for="h">D.お父さんの会社が危ないせいです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题八</h1>
        </div>
        <p>山下さんは今、どこにいますか。</p>
        <audio src="question8.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="i" name="answer8" value="i">
            <label for="i">A.病院です</label><br>
            <input type="radio" id="j" name="answer8" value="j">
            <label for="j">B.警察署です</label><br>
            <input type="radio" id="k" name="answer8" value="k">
            <label for="k">C.高速道路です</label><br>
            <input type="radio" id="l" name="answer8" value="l">
            <label for="l">D.消防署です</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题九</h1>
        </div>
        <p>レポートの締め切りは何日ですか。</p>
        <audio src="question9.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="m" name="answer9" value="m">
            <label for="m">A.二日です</label><br>
            <input type="radio" id="n" name="answer9" value="n">
            <label for="n">B.三日です</label><br>
            <input type="radio" id="o" name="answer9" value="o">
            <label for="o">C.四日です</label><br>
            <input type="radio" id="p" name="answer9" value="p">
            <label for="p">D.五日です</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十</h1>
        </div>
        <p>昨日のパーティーに何人ぐらい来ましたか。</p>
        <audio src="question10.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="q" name="answer10" value="q">
            <label for="q">A.百人ぐらいでした</label><br>
            <input type="radio" id="r" name="answer10" value="r">
            <label for="r">B.７０人～８０人ぐらいでした</label><br>
            <input type="radio" id="s" name="answer10" value="s">
            <label for="s">C.６０人～７０人ぐらいでした</label><br>
            <input type="radio" id="t" name="answer10" value="t">
            <label for="t">D.60人よりも少なかったです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十一</h1>
        </div>
        <p>女の人は鈴木先生からなんと言われましたか。</p>
        <audio src="question11.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="u" name="answer11" value="u">
            <label for="u">A.本を田中さんに返さないように</label><br>
            <input type="radio" id="v" name="answer11" value="v">
            <label for="v">B.本を田中さんに返すように</label><br>
            <input type="radio" id="w" name="answer11" value="w">
            <label for="w">C.本を田中さんに貸さないように</label><br>
            <input type="radio" id="x" name="answer11" value="x">
            <label for="x">D.本を田中さんに貸すように</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十二</h1>
        </div>
        <p>空港へ迎えに行くのは誰ですか。</p>
        <audio src="question12.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="y" name="answer12" value="y">
            <label for="y">A.田中君です</label><br>
            <input type="radio" id="z" name="answer12" value="z">
            <label for="z">B.先生です</label><br>
            <input type="radio" id="aa" name="answer12" value="aa">
            <label for="aa">C.エレンさんです</label><br>
            <input type="radio" id="ab" name="answer12" value="ab">
            <label for="ab">D.田中君と先生です</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十三</h1>
        </div>
        <p>アルバイト料はどう決まるのですか。</p>
        <audio src="question13.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="ac" name="answer13" value="ac">
            <label for="ac">A.経験があると高いです</label><br>
            <input type="radio" id="ad" name="answer13" value="ad">
            <label for="ad">B.経験がないと高いです</label><br>
            <input type="radio" id="ae" name="answer13" value="ae">
            <label for="ae">C.若いと安いです</label><br>
            <input type="radio" id="af" name="answer13" value="af">
            <label for="af">D.年寄りだっと安いです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十四</h1>
        </div>
        <p>女の人はこの後、柴田先生になんと言いますか。</p>
        <audio src="question14.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="ag" name="answer14" value="ag">
            <label for="ag">A.会議は三時からです</label><br>
            <input type="radio" id="ah" name="answer14" value="ah">
            <label for="ah">B.会議は二時半からです</label><br>
            <input type="radio" id="ai" name="answer14" value="ai">
            <label for="ai">C.佐藤先生は会議に参加する</label><br>
            <input type="radio" id="aj" name="answer14" value="aj">
            <label for="aj">D.佐藤は会議にさんかしない</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十五</h1>
        </div>
        <p>どうして部屋が寒いのですか。</p>
        <audio src="question15.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="ak" name="answer15" value="ak">
            <label for="ak">A.窓が開いているからです</label><br>
            <input type="radio" id="al" name="answer15" value="al">
            <label for="al">B.ドアが開いているからです</label><br>
            <input type="radio" id="am" name="answer15" value="am">
            <label for="am">C.ドアも窓も開いているからです</label><br>
            <input type="radio" id="an" name="answer15" value="an">
            <label for="an">D.ストーブが消えたからです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十六</h1>
        </div>
        <p>息子は何が嫌だと言っていますか。</p>
        <audio src="question16.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="ao" name="answer16" value="ao">
            <label for="ao">A.会社の雰囲気です</label><br>
            <input type="radio" id="ap" name="answer16" value="ap">
            <label for="ap">B.会社が潰れそうということです</label><br>
            <input type="radio" id="aq" name="answer16" value="aq">
            <label for="aq">C.会社に休みがないことです</label><br>
            <input type="radio" id="ar" name="answer16" value="ar">
            <label for="ar">D.会社の仕事の内容です</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十七</h1>
        </div>
        <p>男の人はサッカーを見に行くことについてどう思っていますか。</p>
        <audio src="question17.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="as" name="answer17" value="as">
            <label for="as">A.どうしても行きたい</label><br>
            <input type="radio" id="at" name="answer17" value="at">
            <label for="at">B.A.どうしても行きたくない</label><br>
            <input type="radio" id="av" name="answer17" value="av">
            <label for="av">C.谷本さんが行かないなら自分が行く</label><br>
            <input type="radio" id="aw" name="answer17" value="aw">
            <label for="aw">D.谷本さんが行くなら自分が行く</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十八</h1>
        </div>
        <p>男の人はこの動物の一番の人気の理由は何だと言っていますか。</p>
        <audio src="question18.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="ax" name="answer18" value="ax">
            <label for="ax">A.小さくて家の中で飼えることです</label><br>
            <input type="radio" id="ay" name="answer18" value="ay">
            <label for="ay">B.値段が安いことです</label><br>
            <input type="radio" id="az" name="answer18" value="az">
            <label for="az">C.世話が簡単なことです</label><br>
            <input type="radio" id="ba" name="answer18" value="ba">
            <label for="ba">D.人に馴れて可愛いことです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十九</h1>
        </div>
        <p>父親はどうして子供とよく遊ぶようになりましたか。</p>
        <audio src="question19.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bb" name="answer19" value="bb">
            <label for="bb">A.仕事が無くなって暇になったから</label><br>
            <input type="radio" id="bc" name="answer19" value="bc">
            <label for="bc">B.会社の仕事が少なくなったから</label><br>
            <input type="radio" id="bd" name="answer19" value="bd">
            <label for="bd">C.子供と遊びたいと思うようになったから</label><br>
            <input type="radio" id="be" name="answer19" value="be">
            <label for="be">D.母親が子供と遊んでほしいと言ったから</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十</h1>
        </div>
        <p>男の人は自分の車で行きたくないのはどうしてですか。</p>
        <audio src="question20.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bf" name="answer20" value="bf">
            <label for="bf">A.車が小さくて窮屈だからです</label><br>
            <input type="radio" id="bg" name="answer20" value="bg">
            <label for="bg">B.新車を汚したくないからです</label><br>
            <input type="radio" id="bh" name="answer20" value="bh">
            <label for="bh">C.電車の方が気楽だからです</label><br>
            <input type="radio" id="bi" name="answer20" value="bi">
            <label for="bi">D.電車の方が渋滞に巻き込まれないからです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十一</h1>
        </div>
        <p>渡辺さんはどんな行動をとりますか。</p>
        <audio src="question21.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bj" name="answer21" value="bj">
            <label for="bj">A.京都に来たので、女の人と会う</label><br>
            <input type="radio" id="bh" name="answer21" value="bh">
            <label for="bh">B.京都に来たけれど、女の人と合わない</label><br>
            <input type="radio" id="bi" name="answer21" value="bi">
            <label for="bi">C.京都に来なかったので、女の人と合わない</label><br>
            <input type="radio" id="bj" name="answer21" value="bj">
            <label for="bj">D.京都に来たら、女の人と会う</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十二</h1>
        </div>
        <p>男の人は何が必要だと言っていますか。</p>
        <audio src="question22.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bk" name="answer22" value="bk">
            <label for="bk">A.日本の社会や文化を専門的に教えること</label><br>
            <input type="radio" id="bl" name="answer22" value="bl">
            <label for="bl">B.日本の企業文化を教えること</label><br>
            <input type="radio" id="bm" name="answer22" value="bm">
            <label for="bm">C.日本の生活習慣を教えること</label><br>
            <input type="radio" id="bn" name="answer22" value="bn">
            <label for="bn">D.日本のマナを教えること</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十三</h1>
        </div>
        <p>一番大切なのは何だと言っていますか。</p>
        <audio src="question23.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bo" name="answer23" value="bo">
            <label for="bo">A.できるだけたくさんの資料を集めることです</label><br>
            <input type="radio" id="bp" name="answer23" value="bp">
            <label for="bp">B.不必要な資料を捨てることです</label><br>
            <input type="radio" id="bq" name="answer23" value="bq">
            <label for="bq">C.特に必要な資料だけを集めることです</label><br>
            <input type="radio" id="br" name="answer23" value="br">
            <label for="br">D.古くなった資料を捨てることです</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十四</h1>
        </div>
        <p>何を最初に解決すべきだと言っていますか</p>
        <audio src="question24.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bs" name="answer24" value="bs">
            <label for="bs">A.道路の問題です</label><br>
            <input type="radio" id="bt" name="answer24" value="bt">
            <label for="bt">B.交通事故の問題です</label><br>
            <input type="radio" id="bu" name="answer24" value="bu">
            <label for="bu">C.病院の問題です</label><br>
            <input type="radio" id="bv" name="answer24" value="bv">
            <label for="bv">D.ゴミの問題です</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十五</h1>
        </div>
        <p>三十代の人はどのように仕事をすべきですか</p>
        <audio src="question25.mp3" id="aud" autoplay="autoplay"
               controls="controls" preload="auto"></audio>
        <div class="answer-options">
            <input type="radio" id="bw" name="answer25" value="bw">
            <label for="bw">A.命令された仕事を正確にすべきです</label><br>
            <input type="radio" id="bx" name="answer25" value="bx">
            <label for="bx">B.目的や方法を考えて仕事をすべきです</label><br>
            <input type="radio" id="by" name="answer25" value="by">
            <label for="by">C.仕事をするかどうかまず判断すべきです</label><br>
            <input type="radio" id="bz" name="answer25" value="bz">
            <label for="bz">D.悩みを忘れて仕事をすべきです</label><br>
        </div>
    </div>

    <div class="submit-button-container">
        <button id="submit-button">提交</button>
    </div>

    <div class="result-container">
        <p>你做对了<span id="result">0</span>道题！</p>
    </div>
</div>

<div class="card white-card">

    <div class="tab-container">
        <div class="tab" id="tab1">点我查看正确答案！！</div>

    </div>
    <div class="card white-card" id="card2">
        <div class="card-header"> 答案 </div>
        <div class="card-body">

            <div class="card-header">1-5 ACBDD 6-10 BAACD
                11-15 DCDAB 16-20
                BACCB</div>

        </div>
    </div>
</div>
</div>

<script>
    // 获取页面元素
    const submitButton = document.getElementById("submit-button");
    const answerOptions6 = document.getElementsByName("answer6");
    const answerOptions7 = document.getElementsByName("answer7");
    const answerOptions8 = document.getElementsByName("answer8");
    const answerOptions9 = document.getElementsByName("answer9");
    const answerOptions10 = document.getElementsByName("answer10");
    const answerOptions11 = document.getElementsByName("answer11");
    const answerOptions12 = document.getElementsByName("answer12");
    const answerOptions13 = document.getElementsByName("answer13");
    const answerOptions14 = document.getElementsByName("answer14");
    const answerOptions15 = document.getElementsByName("answer15");
    const answerOptions16 = document.getElementsByName("answer16");
    const answerOptions17 = document.getElementsByName("answer17");
    const answerOptions18 = document.getElementsByName("answer18");
    const answerOptions19 = document.getElementsByName("answer19");
    const answerOptions20 = document.getElementsByName("answer20");
    const answerOptions21= document.getElementsByName("answer21");
    const answerOptions22= document.getElementsByName("answer22");
    const answerOptions23= document.getElementsByName("answer23");
    const answerOptions24 = document.getElementsByName("answer24");
    const answerOptions25= document.getElementsByName("answer25");
    const result = document.getElementById("result");

    let correctAnswers = 0; // 初始化做对题数为0

    // 点击提交按钮后的操作
    submitButton.addEventListener("click", () => {
        // 判断第六题的答案是否正确
        let answer6 = "";
        for (let i = 0; i < answerOptions6.length; i++) {
            if (answerOptions6[i].checked) {
                answer6 = answerOptions6[i].value;
                break;
            }
        }
        if (answer6 === "a") {
            correctAnswers++;
        }

        // 判断第七题的答案是否正确
        let answer7 = "";
        for (let i = 0; i < answerOptions7.length; i++) {
            if (answerOptions7[i].checked) {
                answer7 = answerOptions7[i].value;
                break;
            }
        }
        if (answer7 === "g") {
            correctAnswers++;
        }

        // 判断第八题的答案是否正确
        let answer8 = "";
        for (let i = 0; i < answerOptions8.length; i++) {
            if (answerOptions8[i].checked) {
                answer8 = answerOptions8[i].value;
                break;
            }
        }
        if (answer8 === "j") {
            correctAnswers++;
        }

        // 判断第九题的答案是否正确
        let answer9 = "";
        for (let i = 0; i < answerOptions9.length; i++) {
            if (answerOptions9[i].checked) {
                answer9 = answerOptions9[i].value;
                break;
            }
        }
        if (answer9 === "p") {
            correctAnswers++;
        }

        // 判断第十题的答案是否正确
        let answer10 = "";
        for (let i = 0; i < answerOptions10.length; i++) {
            if (answerOptions10[i].checked) {
                answer10 = answerOptions10[i].value;
                break;
            }
        }
        if (answer10 === "t") {
            correctAnswers++;
        }

        // 判断第十一题的答案是否正确
        let answer11 = "";
        for (let i = 0; i < answerOptions11.length; i++) {
            if (answerOptions11[i].checked) {
                answer11 = answerOptions11[i].value;
                break;
            }
        }
        if (answer11 === "v") {
            correctAnswers++;
        }

        // 判断第十二题的答案是否正确
        let answer12 = "";
        for (let i = 0; i < answerOptions12.length; i++) {
            if (answerOptions12[i].checked) {
                answer12 = answerOptions12[i].value;
                break;
            }
        }
        if (answer12 === "y") {
            correctAnswers++;
        }

        // 判断第十三题的答案是否正确
        let answer13 = "";
        for (let i = 0; i < answerOptions13.length; i++) {
            if (answerOptions13[i].checked) {
                answer13 = answerOptions13[i].value;
                break;
            }
        }
        if (answer13 === "ac") {
            correctAnswers++;
        }

        // 判断第十四题的答案是否正确
        let answer14 = "";
        for (let i = 0; i < answerOptions14.length; i++) {
            if (answerOptions14[i].checked) {
                answer14 = answerOptions14[i].value;
                break;
            }
        }
        if (answer14 === "ai") {
            correctAnswers++;
        }

        // 判断第十五题的答案是否正确
        let answer15 = "";
        for (let i = 0; i < answerOptions15.length; i++) {
            if (answerOptions15[i].checked) {
                answer15 = answerOptions15[i].value;
                break;
            }
        }
        if (answer15 === "an") {
            correctAnswers++;
        }

        // 判断第十六题的答案是否正确
        let answer16 = "";
        for (let i = 0; i < answerOptions16.length; i++) {
            if (answerOptions16[i].checked) {
                answer16 = answerOptions16[i].value;
                break;
            }
        }
        if (answer16 === "ar") {
            correctAnswers++;
        }

        // 判断第十七题的答案是否正确
        let answer17 = "";
        for (let i = 0; i < answerOptions17.length; i++) {
            if (answerOptions17[i].checked) {
                answer17 = answerOptions17[i].value;
                break;
            }
        }
        if (answer17 === "av") {
            correctAnswers++;
        }

        // 判断第十八题的答案是否正确
        let answer18 = "";
        for (let i = 0; i < answerOptions18.length; i++) {
            if (answerOptions18[i].checked) {
                answer18 = answerOptions18[i].value;
                break;
            }
        }
        if (answer18 === "ba") {
            correctAnswers++;
        }

        // 判断第十九题的答案是否正确
        let answer19 = "";
        for (let i = 0; i < answerOptions19.length; i++) {
            if (answerOptions19[i].checked) {
                answer19 = answerOptions19[i].value;
                break;
            }
        }
        if (answer19 === "bb") {
            correctAnswers++;
        }

        // 判断第二十题的答案是否正确
        let answer20 = "";
        for (let i = 0; i < answerOptions20.length; i++) {
            if (answerOptions20[i].checked) {
                answer20 = answerOptions20[i].value;
                break;
            }
        }
        if (answer20 === "bg") {
            correctAnswers++;
        }

        // 判断第二十一题的答案是否正确
        let answer21= "";
        for (let i = 0; i < answerOptions21.length; i++) {
            if (answerOptions21[i].checked) {
                answer21 = answerOptions21[i].value;
                break;
            }
        }
        if (answer21 === "bh") {
            correctAnswers++;
        }

        // 判断第二十二题的答案是否正确
        let answer22 = "";
        for (let i = 0; i < answerOptions22.length; i++) {
            if (answerOptions22[i].checked) {
                answer22 = answerOptions22[i].value;
                break;
            }
        }
        if (answer22 === "bk") {
            correctAnswers++;
        }

        // 判断第二十三题的答案是否正确
        let answer23 = "";
        for (let i = 0; i < answerOptions23.length; i++) {
            if (answerOptions23[i].checked) {
                answer23 = answerOptions23[i].value;
                break;
            }
        }
        if (answer23 === "bq") {
            correctAnswers++;
        }

        // 判断第二十四题的答案是否正确
        let answer24 = "";
        for (let i = 0; i < answerOptions24.length; i++) {
            if (answerOptions24[i].checked) {
                answer24 = answerOptions24[i].value;
                break;
            }
        }
        if (answer24 === "bu") {
            correctAnswers++;
        }

        // 判断第二十五题的答案是否正确
        let answer25 = "";
        for (let i = 0; i < answerOptions25.length; i++) {
            if (answerOptions25[i].checked) {
                answer25 = answerOptions25[i].value;
                break;
            }
        }
        if (answer25 === "bx") {
            correctAnswers++;
        }

// 在结果框中显示做对的题数
        result.textContent = correctAnswers;

        // 重置正确答案数量
        correctAnswers = 0;

        // 重置表单
        document.querySelector("form").reset();
    });

    const tab1 = document.getElementById("tab1");
    const card2 = document.getElementById("card2");

    tab1.addEventListener("click", function() {
        if (card2.style.display === "none") {
            card2.style.display = "block";
        } else {
            card2.style.display = "none";
        }
    });

    const tab2 = document.getElementById("tab2");

    tab2.addEventListener("click", function() {
        card2.style.display = "none";
    });

</script>
</body>
</html>
